<template>
  <div class="header">

    <!-- 视口中间内容区域 -->
    <div class="content">

      <!-- 中间区域左边内容 -->
      <div class="left">
        <div class="left_content">
          <span>学生信息管理系统</span>
        </div>
      </div>

      <!-- 右边内容 -->
      <div class="right">
        <div class="right_content">
          <div class="login_head">
            <h2><span>登录</span></h2>
          </div>
          <div class="login">
            <el-form :model="login" ref="userForm">
              <el-form-item prop="username" class="login-item">
                <el-input type="text" v-model="login.username" placeholder="请输入账号"></el-input>
              </el-form-item>
              <el-form-item prop="password" class="login-item">
                <el-input type="password" v-model="login.password" placeholder="请输入密码"></el-input>
              </el-form-item>
            </el-form>
            <div class="submit">
              <div class="text">
                忘记密码？<span>点击这里</span>
              </div>
              <el-button class="btn" type="primary" @click="up">登录</el-button>
            </div>
          </div>

        </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      login: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    //提交登录信息，并跳转到首页
    up() {
      if (this.login.username != 'root' && this.login.password != '123456') {
        this.$message.error('账号或密码错误！')
      } else {
        this.$router.push('/HomePage')
      }

    }
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

.header {
  min-width: 1040px;
  min-height: 99.9vh;
  position: relative;
  background: linear-gradient(-45deg, #e854dd, #75adf8);
}

.content {
  --w: 980px;
  --h: 470px;
  display: flex;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: var(--w);
  height: var(--h);

}

.content .left {
  position: relative;
  color: #eee;
  width: 50%;
  padding: 48px 46px 64px;
  margin: 0 auto;
  background: linear-gradient(0deg, #3a485a 0%, #607089 100%);
  border-radius: 5px;
}



.content .left .left_content span {
  font-size: 28px;

}


.content .right {
  width: 50%;
  height: 100%;
  background: #eee;
  border-radius: 5px;
}

.content .right .right_content {
  padding: 48px 46px 64px;
}

.content .right .right_content::before {
  content: '';
  width: 537px;
  height: 300px;
  position: absolute;
  background: url(../assets/1.jpg);
  background-size: cover;
  left: 0;
  bottom: 0;
}

.login {
  margin-top: 30px;
  height: 100px;
}

.login-item el-inupt {
  width: 124%;
  height: 30px;
}

.submit .text span {
  color: rgb(228, 7, 51);
}

.submit .btn {
  float: right;
}
</style>